import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import {browserHistory,Link} from 'react-router';
import SweetAlert from 'react-bootstrap-sweetalert';
import { connect } from 'react-redux';
import { ProfilePass } from '../../Redux/Actions/profileAction';


class PassProfile extends Component {

  componentWillMount(){
      this.props.dispatch(ProfilePass(this.props.authReducer.user.data.token));
  }

  userFormatter(cell,row){
      return <Link to={{pathname:"/main/profiledetail",state:{truename:row.truename,phone:row.phone,userId:row.userId}}}>详情</Link>;
  }

  stateFormatter(cell,row){
      return "通过"
  }

  render() {
    const products = this.props.profileReducer.profile.data;
    const options = {
        page: 1, 
        sizePerPageList: [],
        sizePerPage: 10, 
        pageStartIndex: 0,
        paginationSize: 3,  
        prePage: 'Prev', 
        nextPage: 'Next', 
        firstPage: 'First',
        lastPage: 'Last',
        paginationShowsTotal: this.renderShowsTotal, 
        noDataText: '目前无用户' 
      }
    const customStyle = {
          overlay : {
            position          : 'fixed',
            width             : '100%',
            top               : 0,
            left              : 0,
            right             : 0,
            bottom            : 0,
            backgroundColor   : 'rgba(255, 255, 255, 0.75)'
          },
          content : {
            position                   : 'absolute',
            width                      : '60%',
            height                     : '350px',
            top                        : '10%',
            left                       : '20%',
            right                      : '20%',
            border                     : '1px solid #ccc',
            background                 : '#fff',
            overflow                   : 'auto',
            WebkitOverflowScrolling    : 'touch',
            borderRadius               : '4px',
            outline                    : 'none',
            padding                    : '20px'

          }
    }
    return (
        <div className="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">			
          <div className="row">
            <ol className="breadcrumb">
              <li><a href="#"><span className="glyphicon glyphicon-home"></span></a></li>
              <li className="active">用户</li>
            </ol>
          </div>
          <div className="row">
            <div className="col-lg-12">
              <div className="panel panel-default">
                <div className="panel-heading">用户列表</div>
                <div className="panel-body">
                  <BootstrapTable data={products} 
                      striped={true} hover={true} search={true} 
                      pagination={true} options={options} searchPlaceholder='请输入您要查询的信息'>
                      <TableHeaderColumn dataField="truename" isKey={true} width="100px" dataAlign="center">用户名</TableHeaderColumn>
                      <TableHeaderColumn dataField="phone" dataAlign="center">手机号</TableHeaderColumn>
                      <TableHeaderColumn dataField="qq" dataAlign="center">QQ</TableHeaderColumn>
                      <TableHeaderColumn dataField="company" dataAlign="center">公司</TableHeaderColumn>
                      <TableHeaderColumn dataField="authState" dataAlign="center" width="80px" dataFormat={this.stateFormatter}>状态</TableHeaderColumn>
                      <TableHeaderColumn dataField="userId" dataAlign="center" width="60px" dataFormat={this.userFormatter}>操作</TableHeaderColumn>
                  </BootstrapTable>
                </div>
              </div>
            </div>
          </div>
        </div>
    )
  }
}
export default connect((state) => {
    const { authReducer,profileReducer } = state;
    return {
        authReducer,profileReducer
    }
})(PassProfile); 